<template>
  <div class="props-table">
    <div v-for="(item, key) in finalProps" :key="key" class="prop-item">
      <span class="label" v-if="item.text">{{ item.text }}</span>

      <div class="prop-component">
        <component
          v-if="item"
          :is="item.component"
          :[item.valueProp]="item.value"
          v-bind="item.extraProps"
          v-on="item.events"
        >
          <template v-if="item.options">
            <component
              :is="item.subComponent"
              v-for="(option, index) in item.options"
              :key="index"
              :value="option.value"
              >
              <!-- {{ option.text }} -->
              <!-- 返回的tsx 所以需要重新渲染一下 -->
              <render-vnode :vNode="option.text"></render-vnode>
            </component>
          </template>
        </component>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  Input as AInput,
  Textarea as ATextarea,
  InputNumber as AInputNumber,
  Slider as ASlider,
  Select as ASelect,
  SelectOption as ASelectOption,
  Switch as ASwitch,
  Radio as ARadio,
  RadioGroup as ARadioGroup,
  RadioButton as ARadioButton,
  Checkbox as ACheckbox,
} from "ant-design-vue";
import StyledUploader from "./StyledUploader.vue";
import Uploader from "./Uploader.vue";
import ImageSrcProp from "./ImageSrcProp.vue";
import ShadowPicker from "./ShadowPicker.vue";
import ColorPicker from "./ColorPicker.vue";
import BackgroundProcesser from "./BackgroundProcesser.vue";
export default {
  name: "props-table",
  components: {
    AInput,
    AInputNumber,
    ASlider,
    ASelect,
    ASelectOption,
    ASwitch,
    ARadio,
    ARadioGroup,
    ARadioButton,
    ACheckbox,
    ATextarea,
    ImageSrcProp,
    ShadowPicker,
    ColorPicker,
    BackgroundProcesser
  },
};
</script>
<script setup lang="ts">
// 编辑器右侧的属性列表 vue版本, 还有一个TSX版本
import { AllComponentProps, ImageComponentProps, TextComponentProps } from "@/defaultProps";
import { mapPropsToFroms, PropsToForms } from "@/propsMaps";
import { reduce, values } from "lodash-es";
import { defineProps, computed, defineEmits, VNode } from "vue";
import RenderVnode from "./RenderVnode";
interface FormProps {
  component: string;
  subComponent?: string;
  value: string;
  extraProps?: { [key: string]: any };
  text?: string;
  options?: { text: string | VNode ; value: any; label?: string }[];
  valueProp: string;
  eventName: string;
  events: { [key: string]: (e: any) => void };
}

const props = defineProps<{
  props: Partial<AllComponentProps>;
}>();

const emits = defineEmits(["change"]);

// console.log("propstable", JSON.stringify(props.props));
const finalProps = computed(() => {
  return reduce(
    props.props,
    (result, value, key) => {
      const newKey = key as keyof TextComponentProps;
      const item = mapPropsToFroms[newKey];
      if (item) {
        const {
          valueProp = "value",
          eventName = "change",
          initalTransform,
          afterTransform,
          options,
        } = item;
        if (options) {
          // console.log(options);
        }
        const newItem: FormProps = {
          ...item,
          value: initalTransform ? initalTransform(value) : value,
          valueProp,
          eventName,
          events: {
            [eventName]: (e: any) => {
              // console.log("prop-table change",newKey,e);
              emits("change", {
                key,
                value: afterTransform ? afterTransform(e) : e,
              });
            },
          },
        };
        // console.log(newItem.events);
        // console.log(item.component, value, typeof value);
        // item.value = item.initalTransform ? item.initalTransform(value) : value;
        // item.valueProp = item.valueProp ? item.valueProp : "value";
        result[newKey] = newItem;
      }
        // console.log("propstable", result);
      return result;
    },
    {} as { [key: string]: FormProps } //只是为了解决value为空报错，并不是真的都存在
  );
});
</script>

<style lang="css" scoped>
.prop-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  margin-left: 10px;
}

.label {
  width: 28%;
}

.prop-component {
  width: 70%;
}
</style>
